<template>
  <div :class="['folder-item', { actived }]">
    <i
      :class="[
        actived ? 'el-icon-folder-checked' : 'el-icon-folder',
        'folder-icon'
      ]"
    />
    <span>{{ item.name }}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Folder',
  props: {
    item: {
      type: Object,
      required: true
    },
    actived: Boolean
  },
  setup() {
    return {}
  }
})
</script>

<style lang="scss" scoped>
.folder-item {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  padding: 10px;
  cursor: pointer;
  &.actived {
    background: rgba(74, 183, 189, 0.2);
    .folder-icon {
      color: #fff;
      background: #4ab7bd;
    }
    span {
      color: #4ab7bd;
    }
  }
  &:hover {
    .folder-icon {
      color: #fff;
      background: #4ab7bd;
    }
    span {
      color: #4ab7bd;
    }
  }
  .folder-icon {
    font-size: 40px;
    padding: 5px;
    border-radius: 8px;
    color: #4ab7bd;
  }
}
</style>
